<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    

    <title>邮箱验证</title>

    <style>
      html{
        height: 100%;
      }

      body{
        height: 100%;
      }
      

      #app{
        width: 100%;
        height: 100%;

        min-width: 900px;
        min-height: 500px;

        overflow: auto;/*产生滚动条*/

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .lead{
        width: 100%;
        height: 15%;

        box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 3px;
      }

      .style{
        width: 500px;
        height: 500px;
        box-shadow: rgba(0, 0, 0, 0.87) 2px 2px 5px;
        border-radius: 250px;

        display: flex;
        justify-content: center;
        align-items: center;
      }
      .style1{
        width: 600px;
        height: 600px;
        box-shadow: rgba(0, 0, 0, 0.87) 2px 2px 5px;
        border-radius: 300px;

        display: flex;
        justify-content: center;
        align-items: center;
      }


    </style>
  </head>
  <body>

    <div id="app">
      <div class="style">
        <form>
          <div style="font-size: 25px;margin-bottom: 50px;margin-left:150px ;">
            邮箱验证
          </div>

          <div class="input-group mb-3">
            <input type="email" class="form-control" placeholder="请输入账户" style="width: 300px;" id="u_id" v-model="user.u_id">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" style="width: 120px;" @click="login">验证账户</button>
            </div>
          </div>


          <div class="input-group mb-3">
            <input type="email" class="form-control" placeholder="请输入邮箱" style="width: 300px;" id="u_email" v-model="user.u_email">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" style="width: 120px;" id="button2" disabled @click="sendcode">发送验证码</button>
            </div>
          </div>

          <div class="input-group mb-3">
            <input type="email" class="form-control" placeholder="请输入验证码" style="width: 300px;" id="u_emailcode" v-model="user.u_emailcode">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" style="width: 120px;" id="button3" disabled @click="verifycode">点击验证</button>
            </div>
          </div>

          <button type="button" class="btn btn-primary" id="button4"  style="margin-left: 150px;" @click="insertEmail" disabled>完成注册</button>
        </form>
      </div>


        
    </div>






    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="//unpkg.com/layui@2.6.7/dist/layui.js"></script>


    <script>


      const app={
        data(){
          return{
            user:{
              u_id:'',
              u_email:'',
              u_emailcode:'',
            },

          }
        },

        methods:{

          insertEmail(){
            var index = layer.load();
            myAxios.post('/user/insertemail',this.user)
                  .then(response=>{
                    layer.close(index);
                    if(response.data.success){
                      layer.msg('注册成功', {icon: 1} ,()=>{
                        window.location.href='login.html';
                      }); 
                    }else{
                      layer.alert(response.data.message);
                    }
                  })
                  .catch(err=>{

                  });
          },
          
          login(){
            var index = layer.load();
            myAxios.post('/user/login',this.user)
                  .then(response=>{
                    layer.close(index);
                    if(response.data.success){
                      layer.msg('账户存在', {icon: 1} ,()=>{
                        $("#button2").removeAttr("disabled");
                        $("#button3").removeAttr("disabled");
                      }); 
                    }else{
                      layer.alert(response.data.message);
                    }
                  })
                  .catch(err=>{

                  });
          },

          sendcode(){
            var index = layer.load();
            myAxios.post('/user/sendcode',this.user.u_email)
                .then(response=>{
                  layer.close(index);
                  if(response.data.success){
                    layer.msg('发送成功！', {icon: 1}
                    );
                  }else{
                    layer.msg(response.data.message, {icon: 2});
                  }
                })
                .catch(err=>{

                  layer.close(index);
                  layer.msg('发送失败,请检查输入邮箱', {icon: 2});
                });
          },



          verifycode(){
            var index = layer.load();
            myAxios.post('/user/verifycode',this.user.u_emailcode)
                .then(response=>{
                  layer.close(index);
                  if(response.data.success){
                    layer.msg('验证成功！', {icon: 1},()=>{
                      $("#button4").removeAttr("disabled");
                    });
                    //跳转至验证成功后的页面
                  }else{
                    layer.msg(response.data.message, {icon: 2});
                  }
                })
                .catch(err=>{
                  layer.close(index);
                  layer.msg('验证失败！', {icon: 2});
                });
          },


        },

        mounted(){

        }

        
      };

      Vue.createApp(app).mount('#app')







    </script>


  </body>
</html>